<template>
    <!-- 详情页面的轮播图 -->
    <van-swipe class="my-swipe">
        <van-swipe-item v-for="(item, index) in bannerArr" :key="index" @click="showimgFn">
            <img :src="item">
        </van-swipe-item>
    </van-swipe>
    <div class="content">
        <h2><span>￥</span>{{ originprice }}</h2>
        <p><van-tag type="danger">自营</van-tag>{{ proname }}</p>
    </div>
</template>
<script lang='ts' setup>
import { ref, type Ref } from 'vue';
// 引入接口
import { detailsdata } from '@/api/detailsapi'
// 引入图片预览组件
import { ImagePreview } from 'vant';
// 父传子
const props = defineProps<{
    id: string
}>()
// interface itemType {
//     [propName: string]: any
// }
let bannerArr: Ref<string[]> = ref([])    // 轮播图数组
let images: Ref<string[]> = ref([])       // 放大后的图片数组
let originprice: Ref<number> = ref(0)
let proname: Ref<string> = ref('')
// console.log('商品id', props.id);
// 调用接口
detailsdata({ proid: props.id }).then((res: any) => {
    // console.log('详情页轮播图数据', res);
    if (res.code == 200) {
        // bannerArr.value = [{ 'img': res.data.img1 }, { 'img': res.data.img2 }, { 'img': res.data.img3 }, { 'img': res.data.img4 }]
        bannerArr.value = [res.data.img1, res.data.img2, res.data.img3, res.data.img4]
        // console.log(bannerArr.value);
        images.value = [res.data.img1, res.data.img2, res.data.img3, res.data.img4]
        proname.value = res.data.proname
        originprice.value = res.data.originprice
    }
})
// 图片预览组件
const showimgFn = () => {
    // console.log(32424, images.value);
    ImagePreview({
        images: images.value,
        closeable: true,
    });
}

</script>
<style lang="scss" scoped>
.van-swipe-item {
    img {
        width: 375px;
        height: 375px;
    }
}

.content {
    padding: 0 15px;
    font-weight: 600;

    h2 {
        color: #ee0a24;
        font-size: 20px;
        margin: 5px 0;

        span {
            font-size: 16px;
        }
    }

    p {
        font-size: 20px;
        margin: 5px 0;

        .van-tag {
            margin-right: 8px;
        }
    }
}
</style>
